<script setup lang="ts">
import { getMemberAddressByIdAPI, postMemberAddressAPI, putMemberAddressByIdAPI } from '@/services/address';
import { onLoad } from '@dcloudio/uni-app';
import type { UniFormsRules } from '@uni-helper/uni-ui-types';
import { ref } from 'vue'

// 获取页面参数
const query = defineProps<{
	id?: string
}>()
// 表单数据
const form = ref({
	receiver: '', // 收货人
	contact: '', // 联系方式
	fullLocation: '', // 省市区(前端展示)
	provinceCode: '', // 省份编码(后端参数)
	cityCode: '', // 城市编码(后端参数)
	countyCode: '', // 区/县编码(后端参数)
	address: '', // 详细地址
	isDefault: 0, // 默认地址，1为是，0为否
})
// 定义校验规则
const rules: UniFormsRules = {
	receiver: {
		rules: [
			{ required: true, errorMessage: '请输入收货人姓名' }
		]
	},
	contact: {
		rules: [
			{ required: true, errorMessage: '请输入收货人联系方式' },
			{
				pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
				errorMessage: '手机号格式不正确'
			}
		]
	},
	countyCode: {
		rules: [
			{ required: true, errorMessage: '请选择所在地区' }
		]
	},
	address: {
		rules: [
			{ required: true, errorMessage: '请输入详细地址' }
		]
	}
}
// 获取表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>()

// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })
// #ifdef MP-WEIXIN
// 收集所在地区
const onRegionChange: UniHelper.RegionPickerOnChange = ({ detail }) => {
	// 前端展示
	form.value.fullLocation = detail.value.join(' ')
	// 省市区代码(后端参数)
	const [provinceCode, cityCode, countyCode] = detail.code!
	Object.assign(form.value, { provinceCode, cityCode, countyCode })
}
// #endif
// #ifdef APP-PLUS || H5
// 收集所在地区
const onCityChange: UniHelper.UniDataPickerOnChange = ({ detail }) => {
	// 省市区代码(后端参数)
	const [provinceCode, cityCode, countyCode] = detail.value.map(v => v.value)
	Object.assign(form.value, { provinceCode, cityCode, countyCode })
}
// #endif
// 是否设为默认地址
const onSwitchChange: UniHelper.SwitchOnChange = ({ detail }) => {
	form.value.isDefault = Number(detail.value)
}
// 提交表单
const onSubmit = async () => {
	try {
		await formRef.value!.validate!()
		if (query.id) {
			// 修改地址
			await putMemberAddressByIdAPI(query.id, form.value)
		} else {
			// 新增地址
			await postMemberAddressAPI(form.value)
		}
		uni.showToast({
			title: query.id ? '修改成功' : '添加成功',
			icon: 'success',
		})
		// 延迟 5 秒后关闭当前页，返回上一页
		setTimeout(() => {
			uni.navigateBack()
		}, 500)
	} catch (error) {
		uni.showToast({
			title: '请填写完整字段',
			icon: 'error',
			mask: true
		})
	}
}
// 获取收货地址详情数据
const getMemberAddressByIdData = async () => {
	if (query.id) {
		const res = await getMemberAddressByIdAPI(query.id)
		Object.assign(form.value, res.result)
	}
}

// 页面加载时
onLoad(() => {
	getMemberAddressByIdData()
})
</script>

<template>
	<view class="content">
		<uni-forms :rules="rules" :model="form" ref="formRef" :label-width="75">
			<!-- 表单内容 -->
			<uni-forms-item name="receiver" label="收货人">
				<input placeholder="请填写收货人姓名" v-model="form.receiver" />
			</uni-forms-item>
			<uni-forms-item name="contact" label="手机号码">
				<input placeholder="请填写收货人手机号码" v-model="form.contact" />
			</uni-forms-item>
			<uni-forms-item name="countyCode" label="所在地区">
				<!-- #ifdef MP-WEIXIN -->
				<picker @change="onRegionChange" class="picker" mode="region" :value="form.fullLocation.split(' ')">
					<view v-if="form.fullLocation">{{ form.fullLocation }}</view>
					<view v-else class="placeholder">请选择省/市/区(县)</view>
				</picker>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<uni-data-picker v-model="form.countyCode" placeholder="请选择地址" popup-title="请选择城市"
								 collection="opendb-city-china" field="code as value, name as text" orderby="value asc"
								 :step-searh="true" :clear-icon="false" self-field="code" parent-field="parent_code"
								 @change="onCityChange">
				</uni-data-picker>
				<!-- #endif -->
			</uni-forms-item>
			<uni-forms-item name="address" label="详细地址">
				<input placeholder="街道、楼牌号等信息" v-model="form.address" />
			</uni-forms-item>
			<uni-forms-item label="设为默认地址">
				<switch @change="onSwitchChange" class="switch" color="#27ba9b" :checked="form.isDefault === 1" />
			</uni-forms-item>
		</uni-forms>
	</view>
	<!-- 提交按钮 -->
	<button @tap="onSubmit" class="button">保存并使用</button>
</template>

<style lang="scss">
/* #ifdef APP-PLUS || H5*/
:deep(.selected-area) {
	height: auto;
	flex: 0 1 auto;
}

/* #endif */
page {
	background-color: #f4f4f4;
}

.content {
	margin: 20rpx 20rpx 0;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: #fff;

	.form-item,
	.uni-forms-item {
		display: flex;
		align-items: center;
		min-height: 96rpx;
		padding: 25rpx 10rpx 40rpx;
		background-color: #fff;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ddd;
		position: relative;
		margin-bottom: 0;

		// 调整 uni-forms 样式
		.uni-forms-item__content {
			display: flex;
		}

		&:last-child {
			border: none;
		}

		.label {
			width: 200rpx;
			color: #333;
		}

		.input {
			flex: 1;
			display: block;
			height: 46rpx;
		}

		.switch {
			position: absolute;
			right: -20rpx;
			top: -30rpx;
			// transform: scale(0.8);
		}

		.picker {
			flex: 1;
		}

		.placeholder {
			color: #808080;
		}
	}
}

.button {
	height: 80rpx;
	margin: 30rpx 20rpx;
	color: #fff;
	border-radius: 80rpx;
	font-size: 30rpx;
	background-color: #27ba9b;
}
</style>